<template>
  <div class="dashboard-container">
    <Card style="margin: 15px">
      <DataBar>
        <span slot="before">共{{total}}条数据</span>
      </DataBar>
      <Table :columns="columns" :data="dataList">
        <template slot-scope="{ row }" slot="name">
          <span>{{ row.display_time | filTimeData }}</span>
        </template>
      </Table>
      <Row style="margin-top: 10px" type="flex" justify="center">
        <template>
          <Page :total="total" show-elevator show-sizer :current="page.page" :page-size="page.limit" @on-change="pageChange" @on-page-size-change="pagesizeChange"/>
        </template>
      </Row>
    </Card>
  </div>
</template>

<script>
import DataBar from '../components/dataBar.vue'
import { list } from '@/api/example/table.js'
export default {
  filters: {
    filTimeData (val) {
      return val.substr(0, 10)
    }
  },
  components: {
    DataBar
  },
  data () {
    return {
      dataList: [],
      columns: [
        {
          title: '操作类型',
          key: 'type'
        },
        {
          title: '操作人',
          key: 'reviewer'
        },
        {
          title: '执行结果',
          key: 'title'
        },
        {
          title: '操作时间',
          key: 'display_time'
        },
        {
          title: '描述',
          key: 'forecast'
        }
      ],
      page: {
        page: 1,
        limit: 10
      },
      total: 0
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.page)
      // console.log(data)
      this.dataList = data.items
      this.total = data.total
    },
    pageChange (pageNum) {
      this.page.page = pageNum
      this.list()
    },
    pagesizeChange (pagesizeNum) {
      // console.log(pagesizeNum)
      this.page.limit = pagesizeNum
      this.list(this.page)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
